<template>
  <div class="user-header">
    <div class="user-info">
      <div class="top flex-align-center justify-between">
        <div class="left">
          <div class="flex-align-center">
            <img class="avatar" src="../../assets/avatar.png" />
            <div class="user-name">{{ data.userInfo.name }}</div>
          </div>
          <div class="user-desc">等级：{{ filterPayType(data.userInfo.level)}}</div>
        </div>
        <div class="right" @click="toReal(data.userInfo.real)">
          <div class="text" style="font-size:12px">{{ data.userInfo.real?"已实名":"未实名"}}</div>
       
        </div>
      </div>
      <div class="flex-align-center justify-between">
        <div class="user-text">
          <div class="num">{{ data.userInfo.ytReward || 0 }}</div>
          <div class="text">昨日销售奖励</div>
        </div>
        <div class="user-text">
          <div class="num">{{ data.userInfo.monthReward || 0 }}</div>
          <div class="text">本月销售奖励</div>
        </div>
        <div class="user-text">
          <div class="num">{{ data.userInfo.totalReward || 0 }}</div>
          <div class="text">累计销售奖励</div>
        </div>
      </div>
    </div>
    <div class="user-team">
      <div class="flex-align-center justify-between"  >
        <div class="user-text" @click="toRouter('/transfer')">
          <div class="num">{{ data.userInfo.jf || 0 }}</div>
          <div class="text">余额</div>
        </div>
        <div class="user-text" @click="toRouter('/team/list')">
          <div class="num">{{ data.userInfo.totalPep || 0 }}</div>
          <div class="text">我的团体</div>
        </div>
        <div class="user-text">
          <div class="num">{{ data.userInfo.totalOrder || 0 }}</div>
          <div class="text">销售总额</div>
        </div>
      </div>
    </div>
    <div class="user-team router">
      <!-- <div class="user-team--title">更多服务</div> -->
      <div class="body">
        <van-cell-group title="更多服务" :border="false">
          <van-cell :title="item.title" v-for="(item, index) in gridTools" :key="index" :icon="item.icon" @click="toRouter(item.url, {}, index)" is-link />
        </van-cell-group>
        <!-- <van-grid style="width: 100%;" :border="false">
          <van-grid-item :icon="item.icon" v-for="item in gridTools" :text="item.title" @click="toRouter(item.url)" :key="item.title" />
        </van-grid> -->
      </div>
    </div>

    <van-overlay :show="showShare">
      <div class="wrapper" @click="showShare = false">
        <!-- <img :src="invitation"  @click.stop /> -->
        <div style="color: black; font-size: 20px;">{{invitation}}</div>
        <div class="btns">
            <van-button  type="parimary" @click="copyText">复制</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { UserInfo } from '@/config/api'
import storage from 'store'
import clipboard3 from 'vue-clipboard3'
const { toClipboard } = clipboard3()
import { ACCESS_TOKEN } from '@/utils/index'
import { useRouter } from 'vue-router'
const router = useRouter()
import { inviteCode } from '@/config/api'
import { showToast } from 'vant'
const invitation = ref('')
const data = ref({
  userInfo: {
    id: '-',
    name: 'User',
    phone: '',
    level: '',
    jf: 0,
    monthReward: 0,
    ytReward: 0,
    real:false,
    totalReward: 0,
    teamNum: 0,
    totalOrder: 0,
    totalPep: 0
  }
})
const filterPayType = (val) => {
  if(val=='-1'){
    return '未入单'
  }
  return ['普通用户', '区县代理', '城市代理', '省级代理','总代理'][val]
}

const showShare = ref(false)

const gridTools = ref([
  {
    icon: 'orders-o',
    title: '订单',
    url: '/order/list'
  },
  {
    icon: 'cash-back-record',
    title: '销售奖励',
    url: '/myReward'
  },
  {
    icon: 'after-sale',
    title: '充值',
    url: '/recharge/create'
  },
  {
    icon: 'notes-o',
    title: '提现',
    url: '/myAccount'
  },
  {
    icon: 'newspaper-o',
    title: '邀请链接',
    handler: () => {
      inviteCode().then((resp) => {
        invitation.value = resp
        showShare.value = true
      })
    }
  },
  {
    icon: 'friends-o',
    title: '退出登陆',
    url: '/login'
  }
])

onMounted(() => {
  loadUserInfo()
})

const copyText = async () => {
  try {
    console.log(invitation.value);
    await toClipboard(invitation.value)
    showToast('复制成功')
  } catch (error) {
    showToast('复制失败')
  }
}

const toRouter = (path, query = {}, i) => {
  if (!path) {
    gridTools.value[i].handler()
    return
  }
  if (path == '/login') {
    storage.remove(ACCESS_TOKEN)
    router.replace(path)
  } else {
    router.push({ path, query })
  }
}
const toReal = async (real) => {
  console.log( real)
  router.push("/addReal")
}

const loadUserInfo = () => {
  UserInfo({}).then((res) => {
    let { user } = res
    data.value.userInfo = { ...res, ...user }
  })
}
</script>

<style lang="less" scoped>
.wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.27rem;
    flex-direction: column;
    justify-content: center;
    .van-button {
        padding: 0 .43rem
    }
}
.wrapper img{
    width: 100%;
}

.wrapper .btns{
    margin-top: .27rem;
}

.van-overlay {
  z-index: 2;
}
.user-header {
  width: 100%;
  //   height: 8.2rem;
  background-image: url('../../assets/home.png');
  background-size: 100% 8.2rem;
  padding-top: 2rem;
  background-repeat: no-repeat;
  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 4.27rem;
    margin: 0 0.4rem;
    background: #ffffff;
    border-radius: 0.21rem;
    .top {
      padding: 0 0.56rem 0;
    }
    .avatar {
      width: 1.87rem;
      height: 1.87rem;
      margin-top: -1.07rem;
    }
    .user-name {
      font-size: 0.48rem;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-top: 0.2rem;
      margin-left: 0.27rem;
    }
    .user-desc {
      font-size: 0.32rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 0.31rem;
    }
  }
  .right {
    text-align: center;
    .user-id,
    .yqm {
      font-size: 0.32rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #101d37;
    }
    .user-id {
      font-size: 0.53rem;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #333333;
    }
  }
}
.user-text {
  margin-bottom: 0.59rem;
  text-align: center;
  position: relative;
  flex: 1;
  &:after {
    content: '';
    width: 0.01rem;
    height: 0.56rem;
    background-color: rgba(204, 204, 204, 0.5);
    position: absolute;
    right: 0;
    top: 0.13rem;
  }
  &:last-of-type:after {
    background-color: transparent;
  }
  .num {
    font-size: 0.53rem;
    font-family: DIN-Bold, DIN;
    font-weight: bold;
    color: #ff002b;
  }
  .text {
    font-size: 0.32rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #101d37;
  }
}
.user-team {
  // width: 690px;/
  //   height: 3.28rem;
  background: #ffffff;
  border-radius: 0.21rem;
  margin: 0.4rem;
  padding: 0.53rem 0;
  .user-text {
    margin-bottom: 0;
  }
  &.router {
    padding: 0.53rem 0.43rem;
  }
  /deep/.van-cell-group__title {
    font-size: 0.43rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 0;
    line-height: initial;
  }
  /deep/.van-cell {
    padding: 0;
    font-size: 0.4rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #101d37;
    display: flex;
    align-items: center;
    height: 1.6rem;
    .van-cell__left-icon {
      font-size: 0.59rem;
      height: 0.53rem;
    }
  }
}
</style>
